<template>
	<s-layout title="明细" onShareAppMessage>
		<view class="filter ss-flex-row ss-row-between ss-col-center">
			<view class="desc color-g">本月获得 <text class="color-b">{{state.income}}</text>收益</view>
			<view class="date-view ss-flex-row ss-col-center" @click="dateClick">
				<view class="week">{{state.date||'本月'}}</view>
				<image :src="sheep.$url.cdn('/static/user/dropwn.png')" class="down-img"></image>
			</view>
		</view>
		<view class="item ss-flex-row ss-row-between ss-col-top" v-for="(item,index) in state.pagination.data"
			:key="index">
			<view class="item-left">
				<view class="label">{{item.event_text}}</view>
				<view class="num">{{item.create_time}}</view>
			</view>
			<view class="item-right">+{{item.amount}}</view>
		</view>

		
		<!-- 数据为空 -->
		<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无数据">
		</s-empty>

		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '点击加载更多',
		  }" @tap="loadmore" />
		<tui-datetime ref="dateTime" type=3 @confirm="change"></tui-datetime>

	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import $store from '@/sheep/store';
	import {

		onLoad,
		onShow,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import _ from 'lodash';

	import tuiDatetime from "./components/tui-datetime/tui-datetime.vue";

	const dateTime = ref(null)

	const state = reactive({
		date: '',
		income: '',
		date: '',
		type: 'score',
		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		loadStatus: '',

	})

	function dateClick() {
		dateTime.value && dateTime.value.show();
	}


	onLoad((e) => {
		if (e.type) {
			state.type = e.type;
		}
		getList();
	});

	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.pagination.current_page + 1);
		}
	}

	// 获取订单列表
	async function getList(page = 1, list_rows = 50) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.sign.getList({
			list_rows,
			page,
			date: state.date,
			type:state.type,
		});
		if (res.error === 0) {
			state.income = res.data.income
			let list = _.concat(state.pagination.data, res.data.list.data);
			state.pagination = {
				...res.data.list,
				data: list,
			};
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}

	function change(e) {
		state.date = e.result;
		state.pagination = {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		};
		getList();
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadmore();
	});
</script>

<style lang="scss" scoped>
	.filter {
		width: calc(100% - 28rpx - 16rpx);
		margin-top: 41rpx;
		margin-left: 28rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;

		.desc {
			height: 43rpx;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 500;
			line-height: normal;
			letter-spacing: normal;
			/* 本月获得 */
			
			display:flex;
			justify-content: center;
			align-items: center;


		}

		.color-g {
			color: #9E9E9E;

		}

		.color-b {
			/* 62 */
			color: #3768FA;
		}

		.date-view {
			width: cacl(189rpx - 48rpx - 25rpx);
			height: 55rpx;
			border-radius: 100rpx;
			background: #FFFFFF;
			padding-left: 48rpx;
			padding-right: 25rpx;

			.week {
				margin-right: 28rpx;
				height: 43rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;
			}

			.down-img {

				width: 28rpx;
				height: 10rpx;
			}

		}
	}

	.item {
		height: calc(132.5rpx - 38rpx - 16rpx);
		width: calc(100% - 21rpx - 16rpx - 31rpx - 25rpx);
		padding: 38rpx 25rpx 16rpx 31rpx;
		margin-left: 21rpx;
		margin-right: 16rpx;
		background: #FFFFFF;

		.item-left {
			.label {
				height: 43rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 550;
				line-height: normal;
				letter-spacing: normal;
				color: #000000;
			}

			.num {

				height: 35rpx;
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;
			}

		}

		.item-right {
			height: 43rpx;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 500;
			line-height: normal;
			text-align: right;
			letter-spacing: normal;
			color: #000000;
		}

	}

	.item:not(:last-child) {
		border-bottom: 1rpx solid #D8D8D8;
	}
</style>